<template>
  <div>
    <template v-if="status">
      <div class="top">
        <div class="topList">
          <div class="createdTime">
            <div>{{ transfer_info.apply_time }}</div>
            <div class="name">收款人：{{ transfer_info.payee }}</div>
          </div>
          <div class="moneyList marBt">
            <div class="list left">
              <div class="title">申请金额</div>
              <div class="money">{{ apply_money }}<span>/{{ transfer_info.total_num }}笔</span></div>
            </div>
            <div class="list right">
              <div class="title">已到账</div>
              <div class="money red">{{ transfer_info.success_amount }}<span
                  v-if="Number(transfer_info.success_num) > 0">/{{ transfer_info.success_num }}笔</span></div>
            </div>
          </div>
          <div class="detailList marBt">
            <div class="moneyList">
              <div class="list left">
                <div class="subTitle">手续费{{ transfer_info.fee_percent }}%</div>
                <div class="subMoney">{{ transfer_info.total_fee }}</div>
              </div>
              <div class="list right">
                <div class="subTitle">已扣手续费</div>
                <div class="subMoney">{{ transfer_info.success_fee }}</div>
              </div>
            </div>
            <div class="moneyList marBt">
              <div class="list left">
                <div class="subTitle">预计领取</div>
                <div class="subMoney">{{ transfer_info.pre_amount }}</div>
              </div>
              <div class="list right">
                <div class="subTitle">待领取</div>
                <div class="subMoney">{{ transfer_info.wait_amount }}<span v-if="Number(transfer_info.wait_num) > 0">/{{
                    transfer_info.wait_num }}笔</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail" v-if="transfer_list.length > 0">
        <div class="title-big">拆分打款明细</div>
        <div class="detailWhole" v-for="item in transfer_list" :key="item.id">
          <div class="createdTime">
            <div>流水号：{{ item.out_bill_no }}</div>
            <div class="name" :class="item.status == 'SUCCESS' ? 'success' : ''">{{ item.status == 'SUCCESS' ?
              '转账成功' : '待收款用户确认' }}</div>
          </div>
          <div class="moneyList marBt">
            <div class="list left detailOther">
              <div class="title otherTitle">本笔实际打款金额</div>
              <div class="money red">{{ item.pay_amount }}</div>
            </div>
            <div class="list right detailOther">
              <div class="title otherTitle">本笔打款手续费</div>
              <div class="money red">{{ item.fee }}</div>
            </div>
          </div>
          <div class="btnWx" v-if="item.status != 'SUCCESS'" @click="clickWx(item)">提到微信</div>
        </div>
      </div>
    </template>
    <template v-else>
      <noData :noData="noData"></noData>
    </template>
  </div>
</template>

<script>
import noData from '@/components/noData/index'
import {
  wechatTxList,
  wechatTxNew,
  wechatTxQuery
} from '@/api/user/fxs/fxsApi'
export default {
  components: {
    noData
  },
  data() {
    return {
      status: 0,
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_recharge_log.png',
        text: '努力加载中...',
        txtColor: '#666',
        marginTop: '0px',
        txtMarginTop: '30px'
      },
      id: '',
      transfer_info: [],
      transfer_list: [],
      apply_money: ''
      // paid_money: '',
      // pay_money: '',
      // total_fee: '',
      // total_num: ''
    }
  },
  created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.init()
    }
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      wechatTxList({ 'log_id': this.id }).then(res => {
        this.$loadingWrap.close()
        this.status = res.status
        if (res.status == 1) {
          console.log(res)
          this.transfer_list = res.data.transfer_list || []
          this.transfer_info = res.data.transfer_info || []
          this.apply_money = res.data.apply_money || '0'
        } else {
          // this.$Error(res.msg)
          this.noData.text = res.msg
        }
      })
    },
    clickWx(item) {
      this.$loadingWrap.show()
      wechatTxNew({ 'transfer_id': item.id }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (wx.canIUse('requestMerchantTransfer')) {
            wx.requestMerchantTransfer({
              mchId: res.data.mchId,
              appId: res.data.appId,
              package: res.data.package,
              success: (res) => {
                // res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
                console.log('success:', res);
                wechatTxQuery({ 'transfer_id': item.id }).then(res => {
                  setTimeout(() => {
                    window.location.reload()
                  }, 1000)
                })
              },
              fail: (res) => {
                console.log('fail:', res);
              },
            });
          } else {
            wx.showModal({
              content: '你的微信版本过低，请更新至最新版本。',
              showCancel: false,
            });
          }
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
  @import "src/styles/mixin";

  .top {
    background: linear-gradient(180deg, #FE754F 0%, #FD4149 103.23%);
    padding: 24px;

    .topList {
      background: #fff;
      border-radius: 12px;
      padding: 32px 24px;

      .createdTime {
        display: flex;
        border-bottom: 2px solid #F0F2F5;
        padding-bottom: 24px;
        justify-content: space-between;
        font-size: 28px;
        font-weight: 500;
        align-items: baseline;

        .name {
          flex: 1;
          @include lineClamp(28px, 1.5, 1);
          margin-left: 16px;
          text-align: right;
        }
      }

      .detailList {
        background: #FAFAFA;
        padding: 24px;
        border-radius: 12px;
      }
    }
  }

  .marBt {
    margin-top: 24px;
  }

  .moneyList {
    display: flex;

    // margin-top: 24px;
    .list {
      width: 50%;

      .title {
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 16px;
      }

      .subTitle {
        font-size: 24px;
        color: #666;
        margin-bottom: 16px;
      }

      .subMoney {
        font-size: 32px;
        font-weight: 600;

        span {
          font-size: 24px;
          font-weight: 400;
          margin-left: 8px;
          color: #333;
        }
      }

      .money {
        font-size: 40px;
        font-weight: 600;

        &.red {
          color: #FD4149;
        }

        span {
          font-size: 24px;
          font-weight: 400;
          margin-left: 4px;
          color: #333;
        }
      }

      &.left {
        border-right: 1px solid #F0F2F5;
      }

      &.right {
        padding-left: 32px;
      }

      &.detailOther {
        text-align: center;

        .title {
          font-weight: 400;
        }
      }
    }
  }

  .detail {
    margin: 16px;

    .title-big {
      font-size: 28px;
      font-weight: 500;
      padding: 16px;
    }

    .detailWhole {
      padding: 24px;
      background: #fff;
      border-radius: 12px;
      margin-bottom: 16px;

      .createdTime {
        display: flex;
        border-bottom: 2px solid #F0F2F5;
        padding-bottom: 24px;
        justify-content: space-between;
        font-size: 24px;
        align-items: baseline;

        .name {
          flex: 1;
          @include lineClamp(24px, 1.5, 1);
          margin-left: 16px;
          text-align: right;
          color: #E6A23C;

          &.success {
            color: #67C23A;
          }
        }
      }
    }

    .btnWx {
      width: 100%;
      // height: 80px;
      line-height: 80px;
      text-align: center;
      background: #FD4149;
      color: #fff;
      font-size: 32px;
      border-radius: 8px;
      margin-top: 24px;
    }
  }
</style>